<template>
  <div class="title">
    <span class="msg">{{ title }}
    </span>
    <span class="myspan" v-for="i in 3" :key="i">
    </span>
  </div>
</template>
<script>
export default {
  props: {
    title: "",
  },
};
</script>
<style lang="scss" >
.title {
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 36px;
  width: 100%;
  height: 40px;
  position: absolute;
  padding-left: 15px;
  .msgbg{
    width: 8vh;
    height: 13px;
    left: 13px;
    top: 16px;
    position: absolute;
    background: rgba(68, 164, 248,.3);
  }
  .threeimg{
    width: 10px;
    height: 10px;
  }
  .msg {
      display: inline-block;
    font-size: 18px;
    font-style: inherit;
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(41, 103, 165, 0.9)), to(transparent));
    background-image: linear-gradient(13deg, rgba(41, 103, 165, 0.7), transparent);
    -webkit-transform: skewx(-18deg) translatex(0px);
    transform: skewx(-2deg) translatex(-6px);
  }
  .myspan {
       width: 5px;
    height: 7px;
    background: rgb(29, 65, 125);
    display: inline-block;
    margin-right: 2px;
    transform: skewx(-18deg) translatex(0px);
    transform-origin: bottom left;
  }
}
</style>